<template>
    <div class="View">
        <SimpleMap ref="MapView" />
    </div>
</template>
<script setup>
import * as SMap from '@best/simplemap-for-vue3';
import { nextTick, ref } from 'vue';
import TestJson from './test.json'
import getTwoPointAngle from '../Test2/Test'
const MapView = ref();
let BlueLayer = null;

var _mapping = {};

for (let i = 0; i < TestJson.RetObject.lsStatBase.length; i++) {
    const element = TestJson.RetObject.lsStatBase[i];
    _mapping[element.StationGuid] = element;
}
/*
 * 弧度转换为角度
 */
function radiansToDegrees(radians) {
    const degrees = radians % (2 * Math.PI);
    return degrees * 180 / Math.PI;
}
/*
 * 计算两点对于正北方向的朝向角度 [0,360]
 * @param {*} start format:{'latitude': 30, 'longitude': 120 }
 * @param {*} end
 */
function bearing(start, end) {
    let rad = Math.PI / 180,
        lat1 = start.latitude * rad,
        lat2 = end.latitude * rad,
        lon1 = start.longitude * rad,
        lon2 = end.longitude * rad;
    const a = Math.sin(lon2 - lon1) * Math.cos(lat2);
    const b = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
    var angle = radiansToDegrees(Math.atan2(a, b));

    if (angle < 0) {
        return 360 - Math.abs(angle)
    } else {
        return angle
    }

}
nextTick(() => {
    BlueLayer = new SMap.Layer.ElementLayer(MapView.value.map);







    for (let i = 0; i < TestJson.RetObject.lsLinkRelation.length; i++) {
        const element = TestJson.RetObject.lsLinkRelation[i];

        // const _ = TestJson.RetObject.lsLinkRelation[0];
        var Star = _mapping[element.FStationGuid];
        var End = _mapping[element.TStationGuid];
        var A = bearing({
            latitude: Star.StatLa, longitude: Star.StatLg
        }, {
            latitude: End.StatLa, longitude: End.StatLg
        });
        var B = bearing({
            latitude: End.StatLa, longitude: End.StatLg
        }, {
            latitude: Star.StatLa, longitude: Star.StatLg
        });


        BlueLayer.add('polyline', {
            id: 'polyline' + i,
            points: [
                { longitude: Star.StatLg, latitude: Star.StatLa },
                { longitude: End.StatLg, latitude: End.StatLa },
            ]
        });


        BlueLayer.add('sector', {
            id: 'Sector' + i,
            point: { longitude: Star.StatLg, latitude: Star.StatLa },
            radius: 5000,
            startAngle: 0,
            endAngle: A,
            color: '#DD00DDAA', // 颜色
            lineWidth: 2,
            lineColor: '#000',
        })


        BlueLayer.add('sector', {
            id: 'Sector2' + i,
            point: { longitude: End.StatLg, latitude: End.StatLa },
            radius: 5000,
            startAngle: 0,
            endAngle: B,
            color: '#DD00DDAA', // 颜色
            lineWidth: 2,
            lineColor: '#000',
        })


    }




    // BlueLayer.add('label', {
    //     id: 'Star',
    //     point: { longitude: Star.StatLg, latitude: Star.StatLa },
    //     text: 'Star',
    //     BGColor: '#000',
    //     offset: [20, 0],
    // });
    // BlueLayer.add('label', {
    //     id: 'End',
    //     point: { longitude: End.StatLg, latitude: End.StatLa },
    //     text: 'End',
    //     BGColor: '#000',
    //     offset: [-20, 0],
    // });
})







</script>
<style lang="less" scoped>
.View {
    width: 100%;
    height: 100%;
}
</style>